<template>
  <div class="home-container">
    <div id="map" class="map"></div>
    <div>
<edit /> 
    </div>
  </div>
</template>

<script lang="ts" setup>
      // 
import { onMounted } from "vue";
import { useStore } from 'vuex';
import { initmap } from './index'
import edit from './components/edit.vue'


 const store = useStore();

    onMounted(() => {
      window.MapBoxGl = initmap((map)=>{
        store.commit('SET_MAPBOXGL', map);
        // this.$store.commit('SET_MAPBOXGL', map); 
      })
    });
</script>

<style lang="scss">
.map{
  width:100vw;
  height:100vh;
}
.home-container {
  width: 100%;

  .remark-section {
    margin-top: 20px;
    padding: 0 5%;

    .remark-content {
      text-align: left;

      .remark-title {
        font-size: 25px;
        font-weight: 600;
      }

      .remark-desc {
        font-size: 22px;
        font-weight: 500;
      }
    }
  }
}
</style>
